@charset "utf-8";
@import "common/reset";
@function p($px) {
    @return $px/2*1px;
}

* {
    margin: 0;
    padding: 0;
}
html{
    height: 100%;
}
body {
    background: url(../img/index/bg.png) no-repeat;
    background-size: cover;
    height: 100%;
    .indexM {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 100%;
        .logo {
            width: p(103);
            height: p(38);
            margin-top: p(44);
            margin-left: p(45);
            img {
                width: 100%;
            }
        }
        .title {
            .tit1 {
                width: p(381);
                height: p(71);
                margin: p(82) auto 0;
                img {
                    width: 100%;
                }
            }
            .tit2 {
                width: p(576);
                height: p(157);
                margin: 0 auto;
                img {
                    width: 100%;
                }
            }
            .tit3 {
                width: p(352);
                height: p(62);
                margin: 0 auto;
                img {
                    width: 100%;
                }
            }
            .tit4 {
                width: p(341);
                height: p(29);
                margin: p(12) auto 0;
                img {
                    width: 100%;
                }
            }
        } // 人
        .ren {
            width: p(332);
            height: p(421);
            margin: 0 auto;
            img {
                width: 100%;
            }
            animation-name:ren;
            /*动画持续时间*/
            animation-duration:5s;
            /*动画时间函数(动画的变换效果)*/
            animation-timing-function:ease-in-out;
            // 次数
            animation-fill-mode:forwards;
            /*动画结束位置在动画最后*/
            animation-iteration-count:1;
        } // 人效果
        @keyframes ren {
            0% {
                transform: translateY(-400px);
                opacity: 0;
            }
            50% {
                transform: translateY(+8px);
                opacity: 1;
            }
            70% {
                transform: translateY(-5px);
            }
            90% {
                transform: translateY(+3px);
            }
            100% {
                transform: translateY(0px);
            }
        }
        .btn {
            display: block;
            width: p(171);
            height: p(70);
            margin: p(14) auto 0;
            img {
                width: 100%;
            }
        } // 月球
        .yueqiu {
            position: absolute;
            top: p(550);
            right: p(115);
            width: p(65);
            height: p(65);
            overflow: hidden;
            z-index: 1;
            border-radius: p(32);
            box-shadow: 0px 0px 22px 13px #62d1e1;
            img {
                width: 100%;
            }
        } //芈月
        .miyue {
            position: absolute;
            top: p(647);
            left: p(49);
            width: p(94);
            height: p(69);
            overflow: hidden;
            animation-name: donghua1;
            animation-fill-mode: forwards;
            -webkit-animation-duration: 1s;
            animation-duration: 3s;
            animation-iteration-count: 1;
            animation-delay: 3s;
            img {
                width: 100%;
            }
        }
        .qizhi {
            position: absolute;
            top: p(900);
            left: p(54);
            width: p(127);
            height: p(78);
            overflow: hidden;
            animation-name: donghua1;
            animation-fill-mode: forwards;
            -webkit-animation-duration: 1s;
            animation-duration: 3s;
            animation-iteration-count: 1;
            animation-delay: 4s;
            img {
                width: 100%;
            }
        }
        .whatgui {
            position: absolute;
            top: p(656);
            right: p(45);
            width: p(148);
            height: p(82);
            overflow: hidden;
            animation-name: donghua1;
            animation-fill-mode: forwards;
            -webkit-animation-duration: 1s;
            animation-duration: 3s;
            animation-iteration-count: 1;
            animation-delay: 2s;
            img {
                width: 100%;
            }
        }
        .taizifei {
            position: absolute;
            top: p(886);
            right: p(56);
            width: p(94);
            height: p(57);
            overflow: hidden;
            animation-name: donghua1;
            animation-fill-mode: forwards;
            -webkit-animation-duration: 1s;
            animation-duration: 3s;
            animation-iteration-count: 1;
            animation-delay: 5s;
            img {
                width: 100%;
            }
        } // 芈月效果
        @keyframes donghua1 {
            0% {
                transform: scale(1);
            }
            60% {
                transform: scale(1.8);
            }
            100% {
                transform: scale(1);
            }
        }
        .yun-1 {
            // 云
            position: absolute;
            top: p(393);
            left: p(41);
            width: p(77);
            height: p(56);
            overflow: hidden;
            animation-name: doghua2-1;
            animation-fill-mode: forwards;
            -webkit-animation-duration: 1s;
            animation-duration: 20s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            
            img {
                width: 100%;
            }
        }
        .yun-2 {
            position: absolute;
            top: p(424);
            right: p(59);
            width: p(58);
            height: p(43);
            overflow: hidden;
            animation-name: donghua2;
            animation-fill-mode: forwards;
            -webkit-animation-direction: 1s;
            animation-iteration-count: infinite;
            animation-duration: 40s;
            animation-timing-function: ease-in-out;
            z-index: 1;
            img {
                width: 100%;
            }
        }
        .yun-3 {
            position: absolute;
            top: p(534);
            right: p(139);
            width: p(43);
            height: p(32);
            overflow: hidden;
            animation-name: donghua2;
            animation-fill-mode: forwards;
            -webkit-animation-direction: 1s;
            animation-iteration-count: infinite;
            animation-duration: 50s;
            animation-timing-function: ease-in-out;
            img {
                width: 100%;
            }
        }
        .yun-4 {
            position: absolute;
            top: p(599);
            right: p(47);
            width: p(59);
            height: p(44);
            overflow: hidden;
            animation-name: donghua2;
            animation-fill-mode: forwards;
            -webkit-animation-direction: 1s;
            animation-iteration-count: infinite;
            animation-duration: 40s;
            animation-timing-function: ease-in-out;
            img {
                width: 100%;
            }
        }
        .yun-5 {
            position: absolute;
            top: p(624);
            right: p(132);
            width: p(34);
            height: p(25);
            overflow: hidden;
            animation-name: donghua2;
            animation-fill-mode: forwards;
            -webkit-animation-direction: 1s;
            animation-iteration-count: infinite;
            animation-duration: 50s;
            animation-timing-function: ease-in-out;
            img {
                width: 100%;
            }
        }
    } // 云效果
    @keyframes doghua2-1{
        0%{
            transform: translateX(0px);
        }25%{
            transform: translateX(20px);
        }70%{
            transform: translateX(-30px)
        }100%{
            transform: translateX(0px)
        }
    }
    @keyframes donghua2 {
        0% {
            transform: translateX(0px);
            opacity: 1;
        }
        100% {
            transform: translateX(-270px);
            opacity: 0;
        }
    }
   
}